<template>
    <div class="login-container">
        <div class="login-box">
            <!-- <div class="login-box-left"></div> -->
            <!-- <div class="login-box-right"> -->
            <h1>融合系统管理平台</h1>
            <el-form style="" size="large">
                <el-form-item>
                    <el-input v-model="account" style="width: 300px" :prefix-icon="'User'" placeholder="用户名" clearable
                        @keyup.enter="deboncedLogin()" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="password" style="width: 300px" :prefix-icon="'Lock'" type="password"
                        placeholder="密&nbsp;&nbsp;&nbsp;码" show-password clearable @keyup.enter="deboncedLogin()" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="captcha" style="width: 160px;" :prefix-icon="'Lock'" placeholder="验证码" clearable
                        @keyup.enter="deboncedLogin()" />
                    <img :src="captchaImg" @click="getCaptcha">
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="deboncedLogin()">
                        登&nbsp;&nbsp;&nbsp;录
                    </el-button>
                </el-form-item>
            </el-form>
            <!-- <div class="register">没有账号，<a href="/login">请注册</a></div> -->
            <!-- </div> -->
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { get, post } from '@/utils/request'
import { useRouter } from 'vue-router'
import _ from 'lodash'
import { useSysConfigStore } from '@/stores/sysConfig'

const router = useRouter()

const account = ref('')
const password = ref('')
const captcha = ref('')
const captchaId = ref('')
const captchaImg = ref('')

onMounted(() => {
    getCaptcha()
})

const getCaptcha = async () => {
    try {
        const res = await get('/captcha');
        captchaImg.value = res.data.captchaImg
        captchaId.value = res.data.captchaId
    } catch (error) {
        console.error(error);
    }
}

const login = async () => {
    const sysConfig = useSysConfigStore()
    if (account.value && password.value && captcha.value) {
        const res = await post('/login', {
            account: account.value,
            password: password.value,
            captchaId: captchaId.value,
            captcha: captcha.value
        });
        if (res.code === 200) {
            ElMessage({
                message: '登录成功！',
                type: 'success',
            });
            //获取token,存入localstorage
            localStorage.setItem('pangu-authorization-token', res.data.token)
            sysConfig.userInfo = res.data.userInfo
            sysConfig.roleList = res.data.roleList
            sysConfig.permissionList = res.data.permissionList
            //加载动态路由
            await sysConfig.addRoute()
            let timer = setTimeout(async () => {
                clearTimeout(timer)
                router.push('/home')
            }, 1000);
        } else {
            getCaptcha()
            captcha.value = ''
            ElMessage.error(res.msg)
        }
    } else {
        ElMessage.error('请输入正确的登录信息！')
    }
}

//登录防抖操作
const deboncedLogin = _.debounce(login, 100)

</script>

<style lang="less" scoped>
.login-container {
    height: 100%;
    // background-color: skyblue;
    background-image: url('/src/assets/login_1.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-box {
        margin-left: 50%;
        height: 380px;
        width: 400px;
        box-sizing: border-box;
        background-color: ghostwhite;
        color: black;
        font-weight: bolder;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;

        h1 {
            height: 50px;
            line-height: 50px;
            font-size: 28px;
            font-weight: bolder;
            margin-bottom: 20px;
        }

        img {
            height: 40px;
            width: 120px;
            margin-left: 20px;
            border-radius: 4px;
            cursor: pointer;
        }

        .register {
            font-size: 13px;
            font-weight: normal;
        }

        .el-button {
            width: 300px;
            margin-left: 1px;
            font-size: 18px;
            margin-top: 10px;
        }
    }
}
</style>